<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>AUI快速完成布局</title>
		<link rel="stylesheet" type="text/css" href="../../css/aui.2.0.css" />
		<style type="text/css">
			body {
				background: transparent;
				background-color: rgba(150,150,150,0.5)
			}
			.aui-btn.aui-active {
				color: #fff !important;
				background-color: #039bf4 !important;
			}
			.aui-btn:active {
				color: #fff !important;
				background-color: #03bbff !important;
			}
			.aui-list .aui-list-item-start {
				-webkit-box-pack: start;
				-webkit-justify-content: flex-start;
				justify-content: flex-start;
			}
			.blankholder {
				overflow: hidden;
				position: relative;
				height: 5px;
				background-color: #EEEEEE;
			}
		</style>
	</head>
	<body>
		<div id='blank' class='blankholder'></div>
		<div class="aui-content aui-margin-b-15">
			<ul class="aui-list aui-form-list">
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label" style="width:45%">
							申请贷款(元)：
						</div>
						<div class="aui-list-item-input">
							<input id="loan_count" type="text" placeholder="请在此输入数字" value="">
						</div>
					</div>
				</li>
				<li class="aui-list-header">
					贷款期限
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div id="bar0" class="aui-list-item-btn aui-list-item-start" style="padding-right: 0.1rem;">
							<div class="aui-btn aui-active" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.1rem" tapmode>
								不限
							</div>
							<div class="aui-btn" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.05rem" tapmode>
								3个月
							</div>
							<div class="aui-btn" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.05rem" tapmode>
								6个月
							</div>
							<div class="aui-btn" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.05rem" tapmode>
								12个月
							</div>
							<div class="aui-btn" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.05rem" tapmode>
								2年
							</div>
							<div class="aui-btn" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.05rem" tapmode>
								3年
							</div>
							<div class="aui-btn" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.05rem" tapmode>
								5年
							</div>
							<div class="aui-btn" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.05rem" tapmode>
								10年
							</div>
						</div>
					</div>
				</li>
				<li class="aui-list-header">
					职业身份
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div id="bar1" class="aui-list-item-btn aui-list-item-start" style="padding-right: 0.1rem;">
							<div class="aui-btn aui-active" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.1rem" tapmode>
								不限
							</div>
							<div class="aui-btn" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.05rem" tapmode>
								上班族
							</div>
							<div class="aui-btn" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.05rem" tapmode>
								个体户
							</div>
							<div class="aui-btn" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.05rem" tapmode>
								企业主
							</div>
							<div class="aui-btn" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.05rem" tapmode>
								学生
							</div>
							<div class="aui-btn" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.05rem" tapmode>
								自由职业
							</div>
						</div>
					</div>
				</li>
				<li class="aui-list-header">
					放款机构类型
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div id="bar2" class="aui-list-item-btn aui-list-item-start" style="padding-right: 0.1rem;">
							<div class="aui-btn aui-active" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.1rem" tapmode>
								不限
							</div>
							<div class="aui-btn" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.05rem" tapmode>
								银行
							</div>
							<div class="aui-btn" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.05rem" tapmode>
								小贷公司
							</div>
							<div class="aui-btn" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.05rem" tapmode>
								典当行
							</div>
							<div class="aui-btn" style="width:4.0rem; margin:0.1rem 0rem 0.1rem 0.05rem" tapmode>
								其他
							</div>
						</div>
					</div>
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner aui-list-item-center aui-list-item-btn">
						<div class="aui-btn aui-btn-danger aui-margin-r-5" style="width:4.0rem;" tapmode onclick="cancleAndReturn()">
							取消
						</div>
						<div class="aui-btn aui-btn-info aui-margin-l-5" style="width:4.0rem;" tapmode onclick="saveAndReturn()">
							提交
						</div>
					</div>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js" ></script>
	<script type="text/javascript" src="../../script/aui-tab.js" ></script>
	<script>
		function isNum(obj) {
			return typeof obj === 'number'
		}

		var ret_val = {
			options : [0, 0, 0, 0, 0]
		}
		apiready = function() {
			api.parseTapmode();
			if (api.pageParam.options[0]) {
				document.getElementById("loan_count").value = api.pageParam.options[0];
			}
			var bar0 = document.querySelector("#bar0");
			if (bar0) {
				var tab = new auiTab({
					element : bar0,
					repeatClick : true
				}, function(ret) {
					ret_val.options[1] = ret.index-1;
				});
				var items = bar0.getElementsByTagName('div');
				//alert(items.length);
				for (var i = 0; i < items.length; i++) {
					items[i].classList.remove("aui-active");
				}
				items[api.pageParam.options[1]].classList.add("aui-active");
			}
			var bar1 = document.querySelector("#bar1");
			if (bar1) {
				var tab = new auiTab({
					element : bar1,
					repeatClick : true
				}, function(ret) {
					ret_val.options[2] = ret.index-1;
				});
				var items = bar1.getElementsByTagName('div');
				//alert(items.length);
				for (var i = 0; i < items.length; i++) {
					items[i].classList.remove("aui-active");
				}
				items[api.pageParam.options[2]].classList.add("aui-active");
			}
			var bar2 = document.querySelector("#bar2");
			if (bar2) {
				var tab = new auiTab({
					element : bar2,
					repeatClick : true
				}, function(ret) {
					ret_val.options[3] = ret.index-1;
				});
				var items = bar2.getElementsByTagName('div');
				//alert(items.length);
				for (var i = 0; i < items.length; i++) {
					items[i].classList.remove("aui-active");
				}
				items[api.pageParam.options[3]].classList.add("aui-active");
			}
		}
		function cancleAndReturn() {
			ret_val.options[4] = 0;
			api.sendEvent({
				name : 'ev_options',
				extra : {
					selector_data : ret_val,
				}
			});
			api.closeFrame();
		}

		function saveAndReturn() {
			ret_val.options[0] = document.getElementById("loan_count").value;
			if (ret_val.options[0] < 0) {
				ret_val.options[0] = 0;
			}
			ret_val.options[4] = 1;
			api.sendEvent({
				name : 'ev_options',
				extra : {
					selector_data : ret_val,
				}
			});
			api.closeFrame();
		}
	</script>
</html>